<template>
  <div>
    <el-tree ref="el_Tree" :data="TreeData" show-checkbox node-key="id" :default-checked-keys="authChecked" :default-expand-all="true" getCheckedNodes>
    </el-tree>
  </div>
  <div class="footerBtn_box">
    <el-button size="small" @click="authDialogVisibleCtrol">取消</el-button>
    <el-button type="primary" size="small" @click="getCheckedNodes">确定</el-button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance,
} from 'vue'
import { ElMessage } from 'element-plus'
import { Auth } from '@/api/apiConfig'

export default defineComponent({
  emits: ['authDialogVisibleCtrol'],
  props: {
    authChecked: {
      type: Array,
    },
    roleId: {
      type: Number,
    },
  },

  setup(props, { emit }) {
    let TreeData = ref<any[]>([])
    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
    let TreeDataChecked = ref<any[]>([])
    let el_Tree = ref()
    const authDialogVisibleCtrol = () => {
      emit('authDialogVisibleCtrol', false)
    }

    const getAuthList = () => {
      const params = {}
      Auth.getAuthList(params).then((res) => {
        TreeData.value = res.data
      })
    }

    const getCheckedNodes = () => {
      let CheckedKeys = proxy?.$refs.el_Tree.getCheckedKeys()
      let params = {
        fRoleId: props.roleId,
        fAuthArray: CheckedKeys,
      }
      Auth.updateAuthRoleId(params).then((res) => {
        if (res.statusCode === 200) {
          ElMessage.success({
            message: res.data.message,
            type: 'success',
            onClose: function () {
              authDialogVisibleCtrol()
            },
          })
        }
      })
    }

    onMounted(() => {
      getAuthList()
    })

    return {
      el_Tree,
      TreeData,
      TreeDataChecked,
      getCheckedNodes,
      authDialogVisibleCtrol,
    }
  },
})
</script>

<style scoped lang="scss">
.footerBtn_box {
  text-align: center;
  margin: 20px 0 0 0;
}
</style>